<template>
    <div class="sdy-home-hot">
      <div class="top">
        <span>京东秒杀</span>
        <span>14</span>
        <van-count-down @finish="finishHandler" :time="subTime">
          <template #default="timeData">
            <span class="block">{{ timeData.hours }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.minutes }}</span>
            <span class="colon">:</span>
            <span class="block">{{ timeData.seconds }}</span>
          </template>
        </van-count-down>
      </div>
      <div class="bottom">
        <ul>
          <li v-for="item in hotList" :key="item.proid">
            <img :src="item.img1" alt="">
            <span>{{ item.category }}</span>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script name="sdyHomeHot" setup lang="ts">
  import { showToast } from 'vant'
  import { getHotList } from '../../../model/goods'
  import { onMounted, ref } from 'vue'
  // 准备一个目标时间
  //   说明: 这个时间应该是服务器给的
  //   现在: 咱们自己定一个时间
  const targetTime = new Date('2023/7/12 00:00:00')
  // 计算当前时间和目标时间之间的时间差
  const subTime = targetTime.getTime() - new Date().getTime()
  
  // 倒计时完成时的事件处理函数
  const finishHandler = () => {
    // 提示用户 秒杀已经结束了
    showToast({
      message: '生日快乐',
      icon: 'like-o'
    })
  }
  
  // 定义接口
  interface HotGoodsInfo {
    img1?: string
    proid?: string
    category?: string
    [key: string]: any
  }
  
  interface Response {
    code: string
    data: Array<HotGoodsInfo>
  }
  
  const hotList = ref<Array<HotGoodsInfo>>([])
  
  // 热门商品列表
  onMounted(async () => {
    const res = await getHotList()
    if ((res as unknown as Response).code !== '200') return
    hotList.value = res.data
  })
  </script>
  
  <style lang="scss" scoped>
  .sdy-home-hot {
    height: 130px;
    background-color: #fff;
    width: 95%;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  
    > .top {
      height: 40px;
      background-image: url();
      background-size: 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
  
      > span {
  
        &:first-child {
          margin: 0 10px 0 20px;
        }
  
        &:last-of-type {
          margin-right: 15px;
        }
      }
    }
  
    > .bottom {
      flex: 1;
      box-sizing: border-box;
      padding-left: 10px;
      overflow: auto;
  
      > ul {
        display: flex;
  
        > li {
          width: 50px;
          height: 70px;
          margin-right: 5px;
          display: flex;
          flex-direction: column;
          align-items: center;
  
          > img {
            width: 50px;
            height: 50px;
            display: block;
          }
  
          > span {
            font-size: 12px;
          }
        }
      }
    }
  }
  
  .colon {
    display: inline-block;
    margin: 0 4px;
    color: red;
  
  }
  .block {
    display: inline-block;
    border-radius: 5px;
    width: 22px;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #50bb78;
  }
  </style>
  